<!--详细内容-->
<template>
  <div class="theDetailedContent">
    <!--头部logo-->
    <div class="theDetailedContent-header" :class="[type ? 'theDetailedContent-header-communicationLine' : 'theDetailedContent-header-educationBase']">
      <!--顶部导航栏-->
      <div class="theDetailedConten-title">
        <img src="@/assets/static/image/redBase/fanhui.png" alt="返回" @click="returnBtn">
        <span :style="{opacity:titleOpacity}">{{ typeTtile }}</span>
      </div>
      <!--文章内容-->
      <div class="theDetailedContent-theArticle" @scroll=handleScroll>
        <!--标题-->
        <div v-if="type && theArticleContent?.cmpName" class="communicationLine-cmpName theDetailedContent-public-title">-{{ theArticleContent.cmpName}}-</div>
        <div class="theDetailedContent-title">
          <img :src="type ? require(`@/assets/static/image/redBase/title1.png`) : require(`@/assets/static/image/redBase/title2.png`) " alt="">
        </div>
        <!--小标题-->
        <div class="theDetailedContent-headings theDetailedContent-public-title">
          <div v-if="type && theArticleContent?.redCultureBaseName" class="communicationLine-redCultureBaseName"><span>{{ theArticleContent.redCultureBaseName}}</span></div>
          <div v-if="!type && theArticleContent?.cmpName">-{{ theArticleContent.cmpName}}-</div>
          <div v-if="theArticleContent?.redCultureBaseName && !type">-{{ theArticleContent.redCultureBaseName}}-</div>
          <div v-if="theArticleContent?.educationBaseName">-{{ theArticleContent.educationBaseName}}-</div>
          <div v-if="theArticleContent?.location">-{{ theArticleContent.location}}-</div>
          <div v-if="theArticleContent?.redType">-{{ theArticleContent.redType}}-</div>
        </div>
        <!--内容-->
        <div style="white-space:pre-line" class="theDetailedContent-content" v-if="theArticleContent?.pathCondition">
          {{ theArticleContent.pathCondition }}
          <p class="contact">
            <span>联系人：{{theArticleContent.contact}}</span>
            <span>电话：{{theArticleContent.contactPhone}}</span>
          </p>
        </div>
        <div style="white-space:pre-line" class="theDetailedContent-content" v-if="theArticleContent?.educationBaseDes">{{ theArticleContent.educationBaseDes }}</div>
      </div>
    </div>
    <!--底部logo-->
    <div class="theDetailedContent-footer" :class="[type ? 'theDetailedContent-footer-communicationLine' : 'theDetailedContent-footer-educationBase']"></div>
  </div>
</template>

<script>
import API from "@/api/api-chat-list";
export default {
  data(){
    return {
      titleOpacity:0,//标题透明度
      theArticleContent:null,//文章内容
  }},
  computed:{
    /**
     * 根据路由显示对应的标题
     * @return {string}
     */
    typeTtile(){
      return this.$store.state.redBase.routerId === 'communicationLine' ? `"富春红色印记"\n党业融合研学交流路线` : `中国移动浙江公司\n红色文化教育基地`;
    },
    /**
     * 判断是否为交流路线
     * @return {boolean}
     */
    type(){
      return this.$store.state.redBase.routerId === 'communicationLine';
    }
  },
  async created(){
    const data = {
      value:null
    }
    if ( this.$store.state.redBase.routerId === 'communicationLine' ){
      //查询红色交流路线详情
      data.value = await API.getRedRouteDetail(this.$route.params.id)
    } else {
      //查询红色教育基地详情
      data.value = await API.getRedBaseDetail(this.$route.params.id)
    }
    this.theArticleContent = data.value.data
  },
  methods:{
    /**
     * 返回红色基地首页
     */
    returnBtn(){
      this.$router.push({ name:'RedBase'})
    },
    //滚动
    handleScroll(e){
      // num决定滚动时导航栏显示的快慢
      const num = 100;
      this.titleOpacity = e.srcElement.scrollTop / num >= 1 ? 1 : e.srcElement.scrollTop / num;
    }
  }
}
</script>

<style scoped lang="less">
@import "@/assets/css/redBase/redBase";
</style>